<template>
  <Card>
    <div class="title">
      <Icon size="18" type="md-list-box"/>
      编辑事故
      <Divider/>
    </div>
    <Form ref="addForm" :label-width="170" :model="form" :rules="formValidate" inline>
      <div class="fromTitle">基础信息</div>
      <FormItem label="事故时间：" style="width:49%;">
        <DatePicker
          v-model="form.date"
          placeholder="请选择时间"
          placement="bottom-start"
          style="width:100%"
          type="date"
        ></DatePicker>
      </FormItem>
      <FormItem label="车牌号：" prop="license_plate_num" style="width:49%;">
        <Input v-model="form.license_plate_num" placeholder="请输入车牌号"/>
      </FormItem>
      <FormItem label="案号：" prop="case_number" style="width:49%;">
        <Input v-model="form.case_number" placeholder="请输入案号"/>
      </FormItem>
      <Form-item label="驾驶员：" style="width:49%;">
        <Input v-model="form.driver" placeholder="驾驶员"/>
        <!-- <Select clearable filterable v-model="form.driver">
          <Option :key="item.id" :value="item.id" v-for="item in personnelList">{{ item.name }}</Option>
        </Select> -->
      </Form-item>
      <Form-item label="接案人：" style="width:49%;">
        <Input v-model="form.receiver_id" placeholder="请输入接案人"/>
      </Form-item>
      <Form-item label="事故情况：" style="width:99%;">
        <Input
          v-model="form.accident_info"
          :autosize="{minRows: 4,maxRows: 5}"
          :rows="4"
          placeholder="请输入..."
          type="textarea"
        ></Input>
      </Form-item>
      <FormItem label="上传照片：" prop="driverUploadFile">
        <upload-pic-thumb-multiple
          ref="driverUploadFile"
          :params="{saveDir: 'accident', type: 'pic'}"
          @on-change="form.accident_file=$event"
        ></upload-pic-thumb-multiple>
        <div
          style="color:#ea856b;font-size: 12px;line-height: 20px;height: 20px;"
        >1、支持jpg、jpeg、png格式的图片，最大不超过5M
        </div>
        <div style="color:#ea856b;font-size: 12px;line-height: 20px;height: 20px;">2、请确保上传完毕之后再提交保存</div>
      </FormItem>
      <div class="fromTitle">事故处理</div>
      <Form-item label="违规处理：" style="width:49%;">
        <Input v-model="form.violation" placeholder="请输入违规处理"/>
      </Form-item>
      <Form-item label="事故性质：" style="width:49%;">
        <Input v-model="form.nature" placeholder="请输入事故性质"/>
      </Form-item>
      <Form-item label="事故责任认定：" style="width:49%;">
        <Input v-model="form.responsible" placeholder="请输入事故责任认定"/>
      </Form-item>
      <div class="fromTitle">事故费用</div>
      <Form-item label="本车车损：" style="width:49%;">
        <Input v-model="form.car_damage" placeholder="本车车损"/>
      </Form-item>
      <Form-item label="三者车损：" style="width:49%;">
        <Input v-model="form.three_car_damage" placeholder="三者车损"/>
      </Form-item>
      <Form-item label="人伤费用：" style="width:49%;">
        <Input v-model="form.injure_cost" placeholder="人伤费用"/>
      </Form-item>
      <Form-item label="保险赔回：" style="width:49%;">
        <Input v-model="form.insurance" placeholder="请输入保险赔回"/>
      </Form-item>
      <Form-item label="花费总计金额：" style="width:49%;">
        <Input v-model="form.total_cost" placeholder="请输入花费总计金额"/>
      </Form-item>
      <Form-item label="结余金额：" style="width:49%;">
        <Input v-model="form.balance_cost" placeholder="请输入结余金额"/>
      </Form-item>
      <Form-item label="亏损金额：" style="width:49%;">
        <Input v-model="form.loss_cost" placeholder="请输入亏损金额"/>
      </Form-item>
      <Form-item label="诉讼金额：" style="width:49%;">
        <Input v-model="form.litigation_cost" placeholder="请输入诉讼金额"/>
      </Form-item>
      <Tabs style="margin-top:15px" type="card" value>
        <TabPane label="人伤情况">
          <div class="btns">
            <Button icon="ios-add" target="_self" type="primary" @click="addHurtSituation">添加</Button>
            <!--            <Button @click="delHurtSituationAll" type="error" icon="md-trash">删除</Button>-->
          </div>
          <Table
            :columns="hurtColumns"
            :data="hurtData"
            border
            @on-selection-change="selectHurtSituation"
          >
            <template slot="action" slot-scope="{ row, index }">
              <a style="color:#2d8cf0;font-size: 12px;" @click="editHurtSituation(row,index)">编辑</a>
              <Divider type="vertical"/>
              <a style="color:#ed4014;font-size: 12px;" @click="delHurtSituation(index)">删除</a>
            </template>
          </Table>
        </TabPane>
        <TabPane label="资料详情">
          <div class="btns">
            <upload-file
              ref="uploadStartFile"
              :params="{saveDir: 'accident', type: 'file'}"
              button-name="上传资料"
              @on-change="refreshTable($event,)"
            ></upload-file>
            <!--            <Button @click="delDetail" type="error" icon="md-trash">删除</Button>-->
          </div>
          <Table
            :columns="detailColumns"
            :data="detailData"
            border
            @on-selection-change="selectDetail"
          ></Table>
        </TabPane>
        <TabPane label="维修情况">
          <div class="btns">
            <Button icon="ios-add" type="primary" @click="addMaintain">添加</Button>
            <!--            <Button @click="delMaintainAll" type="error" icon="md-trash">删除</Button>-->
          </div>
          <Table
            :columns="maintainColumns"
            :data="maintainData"
            border
            show-summary
            sum-text="总计"
            @on-selection-change="selectMaintain"
          >
            <template slot="action" slot-scope="{ row, index }">
              <a style="color:#2d8cf0;font-size: 12px;" @click="editMaintain(row,index)">编辑</a>
              <Divider type="vertical"/>
              <a style="color:#ed4014;font-size: 12px;" @click="delMaintain(index)">删除</a>
            </template>
          </Table>
        </TabPane>
        <TabPane label="维修资料">
          <div class="btns">
            <Upload action multiple style="display:inline-block">
              <Button icon="md-cloud-upload" type="primary">上传</Button>
            </Upload>
            <!--            <Button @click="delMaintainFile" type="error" icon="md-trash">删除</Button>-->
          </div>
          <Table
            :columns="maintainFile"
            :data="maintainFileData"
            border
            @on-selection-change="selectMaintainFile"
          ></Table>
        </TabPane>
      </Tabs>
      <FormItem style="width:90%;text-align:center">
        <Button :loading="saveLoading" type="primary" @click="formSubmit('save')">保存</Button>
        <Button :loading="submitLoading" type="primary" @click="formSubmit('submit')">保存并提交审核</Button>
        <Button style="margin-left: 8px" @click="formReset">重置</Button>
      </FormItem>
    </Form>
    <!--    人伤情况-->
    <Modal v-model="showHurtModal" width="70%" @on-cancel="hurtFormCancel" @on-ok="hurtFormOk">
      <div class="title">
        <Icon size="18" type="md-list-box"/>
        人伤情况
        <Divider/>
      </div>
      <Form ref="addForm" :label-width="170" :model="hurtForm" :rules="formValidate" inline>
        <FormItem label="姓名：" style="width:49%;">
          <Input v-model="hurtForm.name" placeholder="请输入姓名"/>
        </FormItem>
        <Form-item label="年龄：" style="width:49%;">
          <Input v-model="hurtForm.age" placeholder="请输入年龄"/>
        </Form-item>
        <Form-item label="医疗花费：" style="width:49%;">
          <Input v-model="hurtForm.medical_cost" placeholder="请输入医疗花费"/>
        </Form-item>
        <Form-item label="其他花费：" style="width:49%;">
          <Input v-model="hurtForm.other_cost" placeholder="请输入其他花费"/>
        </Form-item>
        <Form-item label="住院天数：" style="width:49%;">
          <Input v-model="hurtForm.hospital_days" placeholder="请输入住院天数"/>
        </Form-item>
        <Form-item label="护理天数：" style="width:49%;">
          <Input v-model="hurtForm.nursing_days" placeholder="请输入护理天数"/>
        </Form-item>
        <Form-item label="护理费：" style="width:49%;">
          <Input v-model="hurtForm.nursing_cost" placeholder="请输入护理费"/>
        </Form-item>
        <Form-item label="挂床天数：" style="width:49%;">
          <Input v-model="hurtForm.bed_days" placeholder="请输入挂床天数"/>
        </Form-item>
        <Form-item label="退费：" style="width:49%;">
          <Input v-model="hurtForm.refund" placeholder="请输入挂床天数"/>
        </Form-item>
        <Form-item label="赔偿费用：" style="width:49%;">
          <Input v-model="hurtForm.compensation_cost" placeholder="请输入赔偿费用"/>
        </Form-item>
        <Form-item label="备注：" style="width:49%;">
          <Input v-model="hurtForm.remark" placeholder="请输入备注"/>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button @click="handleHurtReset('addPayForm')">重置</Button>
        <Button style="margin-left:8px" type="primary" @click="submitHurt('addPayForm')">保存</Button>
      </div>
    </Modal>
    <!--    维修情况-->
    <Modal
      v-model="showMaintain"
      width="70%"
      @on-cancel="maintainFormCancel"
      @on-ok="maintainFormOk"
    >
      <div class="title">
        <Icon size="18" type="md-list-box"/>
        维修情况
        <Divider/>
      </div>
      <Form ref="addForm" :label-width="170" :model="maintainForm" :rules="formValidate" inline>
        <FormItem label="事故时间：" style="width:49%;">
          <DatePicker
            v-model="maintainForm.date"
            placeholder="请选择时间"
            placement="bottom-start"
            style="width:100%"
            type="date"
            @on-change="maintainForm.date=$event"
          ></DatePicker>
        </FormItem>
        <FormItem label="维修内容：" style="width:99%;">
          <Input
            v-model="maintainForm.content"
            :autosize="{minRows: 4,maxRows: 5}"
            :rows="4"
            placeholder="请输入维修内容"
            type="textarea"
          />
        </FormItem>
        <Form-item label="维修类型：" style="width:49%;">
          <Input v-model="maintainForm.type" placeholder="请输入维修类型"/>
        </Form-item>
        <Form-item label="维修费用：" style="width:49%;">
          <Input v-model="maintainForm.cost" placeholder="请输入维修费用"/>
        </Form-item>
      </Form>
      <div slot="footer">
        <Button @click="handleMaintainReset('addPayForm')">重置</Button>
        <Button style="margin-left:8px" type="primary" @click="submitMaintain('addPayForm')">保存</Button>
      </div>
    </Modal>
    <!--    审核原因模态窗口-->
    <Modal
      v-model="reasonModal"
      :mask-closable="false"
      title="请简要说明原因"
      @on-cancel="cancelReasonForm"
    >
      <Form ref="reasonForm" :model="reasonForm">
        <FormItem prop="reason">
          <Input
            v-model="reasonForm.reason"
            :rows="5"
            placeholder="请输入"
            size="large"
            type="textarea"
          />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button :loading="reasonAuditLoading" type="primary" @click="reasonAudit()">确定</Button>
      </div>
    </Modal>
  </Card>
</template>
<script>
import UploadPicThumbMultiple from '../my-components/upload-pic-thumb-multiple'
import {auditAccident, driverPersonnel, editAccident, updateAccident} from '../../api/accident'
import {licensePlateNumList} from '../../api/bus'
import UploadFile from '../my-components/upload-file'

export default {
  components: {
    UploadFile,
    UploadPicThumbMultiple
  },
  data() {
    return {
      reasonForm: {
        reason: ''
      },
      reasonAuditLoading: false,
      licensePlateNumList: [],
      reasonModal: false,
      isShowAuditBtn: false,
      auditRecord: [],
      submitLoading: false,
      saveLoading: false,
      nodeKey: '',
      form: {
        date: '',
        license_plate_num: '',
        case_number: '',
        driver: '', // 默认当前用户
        receiver: '',
        receiver_id: '',
        accident_info: '',
        accident_file: [],
        violation: '',
        nature: '',
        responsible: '',
        car_damage: '',
        three_car_damage: '',
        injure_cost: '',
        insurance: '',
        total_cost: '',
        balance_cost: '',
        loss_cost: '',
        litigation_cost: '',
      },
      hurtColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name',
          align: 'center'
        },
        {
          title: '年龄',
          key: 'age',
          align: 'center'
        },
        {
          title: '医疗花费',
          key: 'medical_cost',
          align: 'center'
        },
        {
          title: '其他花费',
          key: 'other_cost',
          align: 'center'
        },
        {
          title: '住院天数',
          key: 'hospital_days',
          align: 'center'
        },
        {
          title: '护理天数',
          key: 'nursing_days',
          align: 'center'
        },
        {
          title: '护理费',
          key: 'nursing_cost',
          align: 'center'
        },
        {
          title: '挂床天数',
          key: 'bed_days',
          align: 'center'
        },
        {
          title: '退费',
          key: 'refund',
          align: 'center'
        },
        {
          title: '赔偿费用',
          key: 'compensation_cost',
          align: 'center'
        },
        {
          title: '备注',
          key: 'remark',
          align: 'center'
        },
        // {
        //   title: '接案人',
        //   key: 'caseReceiver',
        //   align: 'center'
        // },
        // {
        //   title: '结案日期',
        //   key: 'endDate',
        //   align: 'center'
        // },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      selectHurt: [],
      showHurtModal: false,
      editHurtModal: false,
      hurtForm: {
        name: '',
        age: '',
        medical_cost: '',
        other_cost: '',
        hospital_days: '',
        nursing_days: '',
        nursing_cost: '',
        bed_days: '',
        refund: '',
        compensation_cost: '',
        remark: ''
      },
      editHurtForm: {},
      hurtFormEndDate: '',
      hurtData: [],
      detailColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '附件名称',
          key: 'file_name',
          align: 'left'
        },
        {
          title: '附件格式',
          key: 'file_type',
          align: 'center'
        },
        {
          title: '文件大小（kb）',
          key: 'file_size',
          align: 'center'
        },
        {
          title: '上传时间',
          key: 'created_at',
          align: 'center'
        },
        {
          title: '上传人员',
          key: 'user_name',
          align: 'center'
        }
      ],
      detailData: [],
      selectDetailList: [],
      maintainColumns: [
        {
          type: 'selection',
          width: 120,
          align: 'center'
        },
        {
          title: '维修内容',
          key: 'content',
          align: 'center'
        },
        {
          title: '维修类型',
          key: 'type',
          align: 'center'
        },
        {
          title: '维修费用',
          key: 'cost',
          align: 'center'
        },
        {
          title: '维修时间',
          key: 'date',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      maintainData: [],
      showMaintain: false,
      maintainForm: {
        content: '',
        type: '',
        cost: '',
        date: ''
      },
      selectMaintainList: [],
      maintainFile: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '附件名称',
          key: 'file_name',
          align: 'left'
        },
        {
          title: '文件类型',
          key: 'type',
          align: 'center'
        },
        {
          title: '附件格式',
          key: 'file_type',
          align: 'center'
        },
        {
          title: '文件大小（kb）',
          key: 'file_size',
          align: 'center'
        },
        {
          title: '上传时间',
          key: 'created_at',
          align: 'center'
        },
        {
          title: '上传人员',
          key: 'user_name',
          align: 'center'
        }
      ],
      maintainFileData: [],
      formValidate: {},
      personnelList: []
    }
  },
  watch: {
    $route: function () {
      if (this.$route.params.id !== undefined) {
        this.setButtonStatus()
        this.loadData()
      }
    }
  },
  mounted() {
    driverPersonnel().then(res => {
      this.personnelList = res.data.result
    })
    if (this.$route.params.id !== undefined) {
      this.setButtonStatus()
      this.loadData()
    } else {
      this.$store.commit('closeTag', 'editAccident')
      this.$router.push({
        name: 'accidentList'
      })
    }
  },
  methods: {
    loadData() {
      this.handleReset()
      editAccident(this.$route.params.id).then(res => {
        this.form = res.data
        this.hurtData = res.data.injured
        this.detailData = res.data.document
        this.maintainData = res.data.repair
        this.auditRecord = res.data.auditRecord

        this.$refs.driverUploadFile.handleClearFiles()
        this.$refs.driverUploadFile.setData(res.data.images)
      })
    },
    audit(name) {
      if (name === 'pass') {
        const params = {
          id: this.form.id,
          nodeType: name,
          reason: '',
          nodeKey: this.nodeKey
        }
        if (this.nodeKey === 'accident_leader') {
          params.nodeType = 'end'
        }
        this.toAuditApply(params)
      } else {
        this.reasonModal = true
        this.reasonForm.id = this.form.id
        this.reasonForm.nodeType = name
        this.reasonForm.nodeKey = this.nodeKey
        this.reasonForm.reason = ''
      }
    },
    reasonAudit() {
      this.reasonAuditLoading = true
      this.toAuditApply(this.reasonForm)
    },
    cancelReasonForm() {
      this.$refs.reasonForm.resetFields()
    },
    addHurtSituation() {
      this.clearHurtForm()
      this.showHurtModal = true
    },
    addMaintain() {
      this.maintainForm = {
        content: '',
        type: '',
        cost: '',
        date: ''
      }
      this.showMaintain = true
    },
    clearHurtForm() {
      this.hurtForm = {
        name: '',
        age: '',
        treatmentFee: '',
        other: '',
        hospitalizationDays: '',
        nursingDays: '',
        nursingFee: '',
        hangingBedDays: '',
        refund: '',
        compensation: '',
        caseReceiver: '',
        remark: ''
      }
      this.hurtFormEndDate = ''
    },
    delDetail() {
      console.log(this.selectDetailList)
    },
    handleHurtReset(form) {
      this.hurtForm = {
        name: '',
        age: '',
        medical_cost: '',
        other_cost: '',
        hospital_days: '',
        nursing_days: '',
        nursing_cost: '',
        bed_days: '',
        refund: '',
        compensation_cost: '',
        remark: ''
      }
    },
    submitHurt(form) {
      if (form === 'addPayForm') {
        const formData = this.hurtForm
        this.hurtData.push(formData)
        this.showHurtModal = false
        this.cancel('add')
      } else {
        const formData = this.editHurtForm
        const index = formData.index
        delete formData.index
        this.hurtData.splice(index, 1, formData)
        this.editHurtModal = false
        this.cancel('edit')
      }
    },
    handleMaintainReset(form) {
      this.maintainForm = {
        content: '',
        type: '',
        cost: '',
        date: ''
      }
    },
    submitMaintain(form) {
      if (form === 'addPayForm') {
        const formData = this.maintainForm
        this.maintainData.push(formData)
        this.showMaintain = false
        this.cancel2('add')
      } else {
        const formData = this.editHurtForm
        const index = formData.index
        delete formData.index
        this.maintainData.splice(index, 1, formData)
        this.editHurtModal = false
        this.cancel('edit')
      }
    },
    cancel(form) {
      if (form === 'add') {
        this.handleHurtReset('addPayForm')
      } else {
        this.handleHurtReset('editPayForm')
      }
    },
    cancel2(form) {
      if (form === 'add') {
        this.handleMaintainReset('addPayForm')
      } else {
        this.handleMaintainReset('editPayForm')
      }
    },
    refreshTable(event) {
      this.detailData.push(event.detail)
    },
    delHurtSituation(e) {
      this.$Modal.confirm({
        title: '确认删除',
        content: '您确认要删除这条数据吗?',
        onOk: () => {
          this.hurtData.splice(e, 1)
        }
      })
    },
    delHurtSituationAll() {
      const _this = this
      if (_this.selectHurt.length <= 0) {
        _this.$Message.warning('还未选择要删除的数据')
        return
      }
      _this.$Modal.confirm({
        title: '确认删除',
        content: '您确认要删除所选的 ' + _this.selectHurt.length + ' 条数据?',
        onOk: () => {
        }
      })
    },
    delMaintain(e) {
      this.$Modal.confirm({
        title: '确认删除',
        content: '您确认要删除这条数据吗?',
        onOk: () => {
          this.maintainData.splice(e, 1)
        }
      })
    },
    delMaintainAll() {
      const _this = this
      if (_this.selectMaintainList.length <= 0) {
        _this.$Message.warning('还未选择要删除的数据')
        return
      }
      _this.$Modal.confirm({
        title: '确认删除',
        content:
          '您确认要删除所选的 ' + _this.selectMaintainList.length + ' 条数据?',
        onOk: () => {
        }
      })
    },
    delMaintainFile() {
    },
    editHurtSituation(e, i) {
      console.log(e, i)
      this.showHurtModal = true
      this.hurtForm = e
      this.hurtFormEndDate = e.endDate
      console.log(this.hurtFormEndDate)
    },
    editMaintain(e, i) {
      this.maintainForm = e
      this.showMaintain = true
    },
    formReset() {
      this.form = {
        date: '',
        license_plate_num: '',
        case_number: '',
        driver: '',
        caseReceiver: '',
        accident_info: '',
        accident_file: [],
        violation: '',
        nature: '',
        responsible: '',
        car_damage: '',
        three_car_damage: '',
        injure_cost: '',
        insurance: '',
        total_cost: '',
        balance_cost: '',
        loss_cost: ''
      }
      this.hurtData = []
      this.detailData = []
      this.maintainData = []
      this.$refs.driverUploadFile.handleClearFiles()
    },
    formSubmit(e) {
      this.submitLoading = e === 'submit'
      this.saveLoading = e === 'save'
      this.form.nodeType = e
      this.form.nodeKey = this.nodeKey
      this.form.hurtData = this.hurtData
      this.form.detailData = this.detailData
      this.form.maintainData = this.maintainData
      updateAccident(this.form, this.form.id).then(res => {
        this.submitLoading = this.saveLoading = false
        if (res.data) {
          this.$Message.success(res.message)
          this.$store.commit('closeTag', 'editAccident')
          this.$router.push({
            name: 'accidentList'
          })
        } else {
          this.$Message.error(res.message)
        }
      })
      console.log(this.form)
    },
    getLicensePlateNumList() {
      licensePlateNumList().then(res => {
        const data = []
        res.data.forEach(function (e, i) {
          data.push({
            label: e,
            value: e
          })
        })
        this.licensePlateNumList = data
      })
    },
    handleReset() {
      this.form = {
        date: '',
        license_plate_num: '',
        case_number: '',
        driver: '', // 默认当前用户
        receiver: '',
        receiver_id: '',
        accident_info: '',
        accident_file: [],
        violation: '',
        nature: '',
        responsible: '',
        car_damage: '',
        three_car_damage: '',
        injure_cost: '',
        insurance: '',
        total_cost: ''
      }
      this.hurtData = []
      this.detailData = []
      this.maintainData = []
      this.$refs.driverUploadFile.handleClearFiles()
    },
    hurtDateChange(e) {
      // this.hurtForm.endDate=e;
    },
    hurtFormCancel() {
    },
    hurtFormOk() {
      const d = this.hurtFormEndDate
      this.hurtForm.endDate =
        d.getFullYear() +
        '-' +
        (d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1) +
        '-' +
        d.getDate()
      console.log(this.hurtForm)
    },
    init() {
      this.getLicensePlateNumList()
    },
    maintainFormCancel() {
    },
    maintainFormOk() {
      console.log(this.maintainForm)
    },
    selectDetail(e) {
      this.selectDetailList = e
    },
    selectHurtSituation(e) {
      this.selectHurt = e
    },
    selectMaintain(e) {
      this.selectMaintainList = e
      console.log(e)
    },
    selectMaintainFile() {
    },
    toAuditApply(params) {
      auditAccident(params).then(res => {
        if (res.data.result === true) {
          if (res.data.nodeType === 'pass') {
            this.$Message.success(res.message)
          } else {
            this.reasonAuditLoading = false
            this.reasonModal = false
            this.$Message.error(res.message)
          }
          this.modalApplyVisible = false
          this.$store.commit('closeTag', 'accidentDetail')
          this.$router.push({
            name: 'accidentList'
          })
        }
      })
    },
    setButtonStatus() {
      const roleName = this.$store.getters.user.roleName[0]
      this.nodeKey =
        roleName === '事故-事故处理部'
          ? 'accident_department'
          : roleName === '事故-财务部'
            ? 'accident_finance'
            : 'accident_leader'
      this.isShowAuditBtn =
        this.$route.params.status === 2 &&
        this.nodeKey === this.$route.params.nodeKey
    }
  }
}
</script>
<style lang="">
.fromTitle {
  width: 49%;
  font-weight: 700;
  padding-left: 10px;
  margin: 30px 0;
  border-left: 5px solid #0079fe;
}

.ivu-tabs-nav-wrap {
  border: none;
}

.ivu-tabs-nav {
  width: 100%;
}

.ivu-tabs-tab {
  width: 33%;
  text-align: center;
}

.btns {
  margin: 15px 0;
}

/* 审核记录 */
#auditRecord {
  padding: 0 2%;
}

#auditRecord .title {
  font-family: "Font Awesome 5 Pro Solid", "Font Awesome 5 Pro Regular",
  "Font Awesome 5 Pro", serif;
  font-weight: 900;
  font-style: normal;
  font-size: 16px;
  margin-top: 15px;
}

#auditRecord .stepCard {
  border: 1px solid rgba(215, 232, 244, 1);
  background-color: #f7fbfe;
  height: 120px;
  width: 90%;
  padding: 0 1%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  position: relative;
  left: 35px;
}

#auditRecord .stepCard > div:first-child {
  font-family: "微软雅黑", serif;
  font-weight: 400;
  font-size: 14px;
  color: #666;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#auditRecord .stepCard > div:first-child > span {
  margin-top: 10px;
  color: #999;
}

#auditRecord .stepCard > div:nth-child(2) {
  margin-top: 20px;
  color: #666;
}

#auditRecord .stepCard > div:nth-child(2) > div {
  height: 70px;
  width: 120px;
  display: flex;
  white-space: nowrap;
  justify-content: space-between;
  line-height: 100px;
}

#auditRecord .stepCard > div:nth-child(2) > div img {
  width: 100%;
  height: 100%;
}

#auditRecord .stepCard > div:last-child {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #9ed1f5;
  left: -30px;
  top: 52px;
}

#auditRecord .pointIndex {
  background-color: #9ed1f5;
}
</style>
